<template>
	<view class="gui-relative" style="height:100vh;">
		<view>
			<view class="gui-border-box gui-relative" style="text-align: center;">
				<view class="emple-box">
					<view class="gui-flex gui-justify-content-center gui-relative">
						<image :src="employee.avatar"
							style="width:256rpx;height:256rpx; border-radius: 50%;display: block;" mode="widthFix">
						</image>
						<view class="">
							<image src="../../static/assets/images/huizhang.png"
								style="width:64rpx;height:64rpx;position: absolute;right:12rpx;top:20rpx;will-change: transform;"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="gui-text gui-color-white gui-padding-x">

					</view>
					<view class="gui-text-small" style="color:white;position: absolute;right:0;bottom:0;">
						<text v-if="employee.level_id==1" :class="employee.level_id==1?'hulu-level1':''"
							class="gui-padding-small ">高级</text>
						<text v-if="employee.level_id==2" :class="employee.level_id==2?'hulu-level2':''"
							class="gui-padding-small">明星</text>
						<text v-if="employee.level_id==3" :class="employee.level_id==3?'hulu-level3':''"
							class="gui-padding-small">特级</text>
					</view>
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding " style="height:156rpx;">
				<view class="">
					<view class="gui-flex gui-justify-content-start gui-align-items-center">
						<text class="gui-h5 gui-boldder">{{employee.nick_name}}</text>
						<u-icon name="man" color="#2979ff" size="32" v-if="employee.sex==1"></u-icon>
						<u-icon name="woman" color="#e84393" size="32" v-if="employee.sex==2"></u-icon>
					</view>
				</view>
				<view>
					<u-scroll-list :indicator="false" style="width:700rpx;">
						<view v-for="(it, index) in employee.good_at" :key="index">
							<text class="hulu-tag gui-text-small">
								{{it}}
							</text>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding ">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="tags-fill" color="#2979ff" size="32"></u-icon>
					<text class="gui-h6 gui-boldder">个人信息</text>
				</view>
				<view class="">
					<view class="gui-flex gui-space-between" style="margin-top:10rpx;">
						<view class="gui-flex">
							<text class="gui-text-small ">等级:</text>
							<view class="gui-text-small ">
								<text v-if="employee.level_id==1">高级</text>
								<text v-if="employee.level_id==2">明星</text>
								<text v-if="employee.level_id==3">特级</text>
							</view>
						</view>
						<view class="gui-flex">
							<text class="gui-text-small ">认证:</text>
							<view class="gui-text-small ">
								{{employee.certification}}
							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="calendar-fill" color="#2979ff" size="32"></u-icon>
					<text class="gui-h6 gui-boldder">个人详情</text>
				</view>
				<view class="gui-text-small gui-wrap">
					<rich-text :nodes="employee.introduction" style="text-wrap: wrap;"></rich-text>
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>

			<view class="gui-padding ">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="tags-fill" color="#2979ff" size="32"></u-icon>
					<text class="gui-h6 gui-boldder">所授私教</text>
				</view>
				<view class="" v-if="employee.Personalcourse.ID!=0">
					<view class="gui-flex gui-space-between" style="margin-top:10rpx;">
						<u-tag :text="employee.Personalcourse.name" type="warning" icon="bag-fill" @tap="toCourse(employee.Personalcourse.ID)"></u-tag>
					</view>
				</view>
				<view class="" v-else>
					<hulu-empty></hulu-empty>
				</view>

			</view>
			<view class="" style="height: 180rpx;">

			</view>
		</view>
		<view class="pay-btn">
			<view class="pay-btn-warp">
				<up-button @tap="callPhone" size="large" type="primary" color="linear-gradient(45deg,#52e5e7,#130cb7)"
					shape="circle" text="咨询">
				</up-button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, ref } from 'vue'
	import useEmployee from '@/api/employee'
	import request from '@/utils/request'

	const { showEmployee, employee } = useEmployee()
	const id = ref()
	onLoad((options) => {
		id.value = (+options.id)
	})
	onMounted(async () => {
		await showEmployee(id.value)
	})

	const makeOrder = () => {
		uni.switchTab({
			url: `/pages/appointment/index`
		})
	}
	const toCourse=(id)=>{
		uni.switchTab({
			url: `/pages/personalcourse/index?id=${id}`
		})
	}
	const callPhone=()=>{
		uni.makePhoneCall({
			// 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
			phoneNumber: employee.value.phone,
			// 成功回调
			success: (res) => {
				console.log('调用成功!')
			},
			// 失败回调
			fail: (res) => {
				console.log('调用失败!')
			}
		});
	}
	
</script>

<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}

	.emple-box {
		background-color: #2A82E4;
		box-sizing: border-box;
		position: relative;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding-bottom: 20rpx;
	}
</style>